<template>
	<view style="width:100%">
		<div class="tab">
			<scroll-view class="nav" scroll-x="true" scroll-left="120">
				<view class="flex text-center">
					<view
						class="cu-item flex-sub"
						:class="{ cur: index == tab.current }"
						:data-id="index"
						v-for="(item, index) in tab.items"
						@click="handleTabChange(index)"
						:key="index"
					>
						{{ item.title }}
					</view>
				</view>
			</scroll-view>
			<view class="conwrap no-bg no-martop">
				<mescroll-uni top="100" @down="downCallback" @up="upCallback" :down="downOption"
 	 				:up="upOption">
					<view class="conwrap no-bg noptbmtb item cu-list menu-avatar none">
						<view v-if="tab.current === 0 && tab.items[0].data.length > 0"><DclItem :item="item" v-for="(item, index) in tab.items[0].data" :key="index" /></view>
						<view v-else-if="tab.current === 1 && tab.items[1].data.length > 0"><YwcItem :item="item" v-for="(item, index) in tab.items[1].data" :key="index" /></view>
						<view v-else-if="tab.current === 2 && tab.items[2].data.length > 0"><DjzItem :item="item" v-for="(item, index) in tab.items[2].data" :key="index" /></view>
						<view v-else class="list-none">
							<image class="emptyImg" />
							<view class="text">no data</view>
							<navigator url="/pages/grab/index">Go</navigator>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</div>
	</view>
</template>

<script>
import Navigate from '@/components/Navigate/index.vue';
import DclItem from './components/ZTab/Dcl.vue';
import YwcItem from './components/ZTab/Ywc.vue';
import DjzItem from './components/ZTab/Djz.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import fetch from '@/common/fetch.js';
export default {
	components: {
		DclItem,
		YwcItem,
		DjzItem,
		MescrollUni,
	},
	data() {
		return {
			downOption:{
				textInOffset:"Pull down to refresh",
				textOutOffset:"Release update",
				textLoading:"Loading……"
			},
			upOption:{
				textLoading:"Loading……" 
			},
			isShowNoMore: false,
			tab: {
				current: 0,
				items: [
					{
						title: 'waiting',
						data: []
					},
					{
						title: 'done',
						data: []
					},
					{
						title: 'frozen',
						data: []
					}
				]
			}
		};
	},
	onLoad(option){
		if(option.index){
			this.tab.current = option.index
		}
	},
	onShow(option){
		this.getData(0, null);
	},
	mounted() {
		this.getData(0, null);
	},
	methods: {
		handleTabChange(index) {
			this.tab.current = index;
			this.getData(index, null);
		},
		getData(index, mescroll) {
			fetch
				.request(
					'/index/qiang/recordlist',
					{
						order_status: index
					},
					'GET'
				)
				.then(res => {
					if (res.code === '0' || res.code === 0) {
						this.tab.items[index].data = res.data;
						if (mescroll) {
							setTimeout(() => {
								mescroll.endErr();
							}, 500)
						}
					} else {
						uni.showToast({
							title: res.msg, //其实是error,为了不展示给用户
							icon: 'none',
							duration: 2000
						});
					}
				});
		},
		downCallback(mescroll) {
			this.getData(this.tab.current, mescroll);
		},
		upCallback(mescroll) {
			console.log('下拉');
			this.isShowNoMore = false;
			mescroll.endUpScroll(this.isShowNoMore);
		}
	}
};
</script>

<style lang="less">
.nav {
	padding: 0 9px;
	white-space: nowrap;
}
.text-center {
	text-align: center;
}
.emptyImg {
	width: 153px;
	height: 153px;
	margin: auto;
	margin-top: 14px;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url('~@/static/order_empty.png');
}
.nav .cu-item.cur {
	color: #fff;
	border-radius: 30px;
	height: 30px;
	line-height: 30px;
	margin-top: 8px;
	background-image: linear-gradient(45deg, #F53D46, #F53D46);
}
.list-none{
    margin-top: 38px;
    text-align: center;
}
.list-none > uni-navigator,
.list-none > wx-navigator{
	display: inline-block;
	height: 43px;
	background: #F53D46;
	color: #fff;
	border-radius: 45px;
	padding: 0 38px;
	line-height: 45px;
}
.list-none> uni-view.text,
.list-none> wx-view.text{
    color: #999;
    margin-bottom: 9px;
}

.conwrap.noptbmtb {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
}
.menu-avatar.none .cu-item {
    background: none;
	margin: 0;
}
</style>
